@tailwind base;
@tailwind components;
@tailwind utilities;

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.1s;
}

html,
body {
	/* To match Figma weight */
	text-rendering: geometricPrecision;
	@apply -tracking-3 text-white/90;
}

html {
	--font-inter: 'Inter';
	/* Space above the sheet. Putting here because it's used in multiple places for calculations */
	--sheet-top: 2vh;
	--wallpaper-blur: 12px;
}

/* Global scrollbar styling */
/* We set this here because some components cannot easily use ScrollArea or FadeScroller components (e.g., react-window) */
::-webkit-scrollbar {
	width: 11px;
	background: transparent; /* Transparent track by default */
}

::-webkit-scrollbar-track {
	background: transparent; /* Transparent track by default */
}

/* Show track background on hover */
::-webkit-scrollbar:hover {
	background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.15);
	background-clip: padding-box; /* Ensure the background only applies within the content box */
	border: 4px solid transparent; /* Key trick for obtaining a thin scrollbar */
	border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.4);
}

@supports (font-variation-settings: normal) {
	html {
		--font-inter: 'Inter var';
	}
}

::selection {
	@apply bg-brand text-white;
}

input,
button {
	font-size: inherit;
	text-rendering: inherit;
}

/* https://stackoverflow.com/a/45050338 */
input,
textarea,
button,
select,
a {
	-webkit-tap-highlight-color: transparent;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.umbrel-hide-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.umbrel-hide-scrollbar {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.umbrel-wallpaper-fade-scroller {
	mask-image: linear-gradient(to right, transparent, red 16px calc(100% - 16px), transparent);
}

.umbrel-dialog-fade-scroller {
	mask-image: linear-gradient(to bottom, transparent, red 32px calc(100% - 32px), transparent);
}

.umbrel-cmdk-fade-scroller {
	mask-image: linear-gradient(to bottom, transparent, red 20px calc(100% - 20px), transparent);
}

/* Targets the correct div inside the react-window component */
.umbrel-files-fade-scroller > div > div {
	mask-image: linear-gradient(to bottom, red 0, red calc(100% - 24px), transparent);
}

/* Only fade the top when a user has scrolled */
.umbrel-files-fade-scroller.scrolled > div > div {
	mask-image: linear-gradient(to bottom, transparent 0, red 24px, red calc(100% - 24px), transparent 100%);
}

.umbrel-divide-y > * {
	@apply relative;
}
.umbrel-divide-y > * + *::before {
	content: '';
	@apply absolute inset-x-0 top-0 h-[1px] w-full bg-gradient-to-r from-transparent via-white/5 to-transparent;
}

@keyframes blink-caret {
	50% {
		background: transparent;
	}
}

@keyframes pulse-border {
	50% {
		border-color: var(--segment-color);
		box-shadow: var(--segment-color) 0 0 0 1px;
	}
}

@keyframes slide-down {
	to {
		transform: translateY(100px);
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes fade-in {
	to {
		opacity: 1;
	}
}

@keyframes bounce-gradient {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

.umbrel-bouncing-gradient {
	background: linear-gradient(to right, transparent, white, transparent);
	background-size: 200% 100%;
	animation: bounce-gradient 2s ease infinite;
}

[cmdk-list] {
	/* height: var(--cmdk-list-height); */
	/* min-height: 200px; */
	max-height: 500px;
	transition: height 100ms ease;
	/* scroll-padding-block-start: 20px; */
	/* scroll-padding-block-end: 20px; */
}

[cmdk-item] + [cmdk-item] {
	@apply mt-1 md:mt-2.5;
}

@keyframes animate-arc {
	from {
		stroke-dashoffset: var(--full-length);
		stroke-opacity: 0;
	}
	to {
		stroke-dashoffset: var(--final-offset);
		stroke-opacity: 1;
	}
}

@keyframes animate-unblur {
	from {
		filter: blur(var(--wallpaper-blur));
		scale: 1.25;
	}
	to {
		filter: blur(0);
		scale: 1;
	}
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

.umbrel-pulse {
	animation-name: pulse;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}

@keyframes pulse-a-few-times {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	40% {
		opacity: 0.5;
	}
	60% {
		opacity: 1;
	}
	80% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

.umbrel-pulse-a-few-times {
	animation-name: pulse-a-few-times;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/* Override Tailwind truncate class because  */
/* https://github.com/tailwindlabs/tailwindcss/issues/10939 */
.truncate {
	overflow: initial;
	overflow-x: hidden; /* for older browsers, though top and bottom of text in `tight-inter-trim` is going to be clipped at the top and bottom */
	overflow-x: clip;
}

/* Fixes action button not aligning to the right when content is too short */
[data-sonner-toaster] [data-content] {
	@apply w-full;
}

.xterm .xterm-viewport {
	background-color: transparent !important;
}

.xterm .xterm-viewport {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

/* Permanent Marker self-hosted font */
@font-face {
	font-weight: 400;
	font-family: 'Permanent Marker';
	font-style: normal;
	src: url('/fonts/permanent-marker.woff2') format('woff2');
	font-display: swap;
}
